<template>
  <div class="page-login">
    <n-form
      class="login-form"
      ref="formRef"
      label-placement="left"
      label-width="auto"
      :model="model"
      :rules="rules"
    >
      <n-form-item label="用户名:" path="username">
        <n-input v-model:value="model.username" placeholder="username" />
      </n-form-item>

      <n-form-item label="密码:" path="password">
        <n-input
          v-model:value="model.password"
          placeholder="password"
          type="password"
        />
      </n-form-item>

      <n-form-item>
        <n-button block type="primary" :loading="loading" @click="handleClick">
          登录
        </n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script>
// 引入 login 方法
import { login } from "@/api/user";

export default {
  data() {
    return {
      model: {
        username: "admin", // 用户名
        password: "123456", // 密码
      },
      rules: {
        username: [
          { required: true, message: "请输入username", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入password", trigger: "blur" },
        ],
      },
      // 用于表示当前登录请求是否正在请求中
      loading: false,
    };
  },

  methods: {
    /**
     * 登录按钮点击
     */
    handleClick() {
      // 0. 触发表单校验，ref 标记表单组件，得到表单组件的实例对象，调用它的一些方法
      this.$refs.formRef.validate((errors) => {
        console.log("erros", errors);
        // 判断 errors 是否有值
        if (errors) {
          // 有值，校验不通过，代码不往下执行
          return;
        }

        // 校验通过，往下执行
        // 调用后端接口登录
        //    1. 可以直接使用 utils/request.js
        //    2. 将所有接口的调用封装成一个函数，这里直接调用封装的函数
        // login(this.model.username, this.model.password)
        //   .then((response) => {
        //     console.log("response", response);
        //     // 判断 response.data.code 是否为 '200'
        //     if (response.data.code === "200") {
        //       // 登录成功
        //       this.$message.success("登录成功");
        //     } else {
        //       // 登录失败，给用户一些提示，文案就用后端给的 message
        //       this.$message.error(response.data.message || "登录失败");
        //     }
        //   })
        //   .catch((error) => {
        //     console.log("error", error);
        //   });

        /**
         * 优化描述：
         *  上面登录接口，需要在 .then 中判断业务状态码是否为 '200'
         *  后续的所有接口，都需要有这么一段判断逻辑，过于麻烦。可以将这段判断逻辑写入到 axios 封装的响应拦截中。
         */
        // 将 this.loading 设置为 true，表示正在调用接口
        this.loading = true;
        login(this.model.username, this.model.password)
          .then((response) => {
            // 这里response直接就是后端的响应内容
            console.log("response", response);
            this.$message.success("登录成功");
            // 将用户信息写入store中
            this.$store.commit("app/set_userInfo", response.data);
            // 跳转页面
            this.$router.push("/dashboard/console");
          })
          .finally(() => {
            // 不管成功还是失败，都会执行的回调
            // 将 this.loading 设置为 false, 表示接口调用完成
            this.loading = false;
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: aqua;

  .login-form {
    padding: 16px;
    width: 300px;
    border-radius: 10px;
    background-color: #fff;
  }
}
</style>
